<html>

<head>
    <link rel="stylesheet" href="../normalize.css">
    <link rel="stylesheet" href="../index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1 v-if="awesome">Vue is awesome!</h1>


        <h1 v-if="awesome_2">Vue is awesome!</h1>
        <h1 v-else>Oh no 😢</h1>

        <!--使用template包含多个元素-->

        <template v-if="ok">
            <h1>Title</h1>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
        </template>

        <!--v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。-->
        <div v-if="Math.random() > 0.5">
            Now you see me
        </div>
        <div v-else>
            Now you don't
        </div>

        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
        <input type="button" v-on:click="loginType = 'email'" value="toggle login type">

        <!--加上key属性才是符合需求的情况-->
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <input type="button" v-on:click="loginType = 'email'" value="toggle login type">

    </div>

    <script type="text/javascript">
        var vue = new Vue({
            el: '#app',
            data: {
                awesome: 1 == 1,
                awesome_2: 1 == 2,
                ok: true,
                type: "D",
                loginType: "username"
            }
        });
    </script>
</body>

</html>